<template>
	<view class="container">
		<view class="login">
			<view class="title">登录/注册</view>
			<view class="desc">为了保障您的服务体验，请登录/注册后使用</view>
		</view>
		<view class="submit_phone">
			<van-field v-model="phone" placeholder="请输入手机号码">
				<text slot="left-icon">+86</text>
			</van-field>
			<view class="button">
				<van-button type="info" size="small" round block :disabled="disabled">发送验证码</van-button>
			</view>
		</view>
		<view class="deal_box">
			<van-checkbox :value="checked" @change="onChange" icon-size="15">
				<view class="deal">
					阅读并同意
					<text>用户协议</text>
					、
					<text>隐私政策</text>
				</view>
			</van-checkbox>
		</view>
	</view>
</template>

<script setup>
import { ref, watch } from 'vue';

const phone = ref('');
const disabled = ref(true);
watch(
	phone,
	(val, oldVal) => {
		console.log(val, oldVal);
	},
	{ immediate: true }
);
</script>

<style lang="scss" scoped>
.container {
	padding: 0 50rpx;
	.login {
		margin: 100rpx 0 50rpx;
		.title {
			font-size: 36rpx;
			font-weight: 550;
		}
		.desc {
			margin-top: 10rpx;
			font-size: 22rpx;
			color: #999;
		}
	}
	.submit_phone {
		:deep(.van-cell) {
			padding-left: 0;
			padding-right: 0;
		}
		text {
			color: $uni-color-primary;
			padding-right: 15rpx;
		}
		.button {
			margin-top: 80rpx;
		}
	}
	.deal_box {
		position: absolute;
		bottom: 50rpx;
		:deep(.van-checkbox) {
			display: flex;
			align-items: center;
			font-size: 24rpx;
		}
		.deal {
			text {
				color: $uni-color-primary;
			}
		}
	}
}
</style>
